
/**
 * ***************合并问题*************************
 * 一、setState第二个参数的含义
 * 参数2：是状态被更新后调用的回调函数,类似于vue中nextTick
 * 二、setState的合并问题
 * 1、在一个事件处理函数中如果多次执行setState会被合并成一次
 * 2、如果在一个事件处理函数中想要执行多次setState,而不被合并，做法如下
  * setState第一个参数的问题
  * 1）对象：合并的问题
  * 2）回调函数
 * 3、当setState数据变化后，立即页面刷新
 *  ReactDOM.flushSync()方法来完成
 */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
export default class StateDemo2 extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }

  clickHandle = () => {
    ReactDOM.flushSync(()=>{
      //第1次执行
      this.setState((prevState)=>({count:prevState.count+1}), () => {
        console.log('1、count', this.state.count);
      })
    })
   
    //第2次执行
    ReactDOM.flushSync(()=>{
      //第1次执行
      this.setState((prevState)=>({count:prevState.count+5}), () => {
        console.log('2、count', this.state.count);
      })
    })
    //第3次执行
    ReactDOM.flushSync(()=>{
      //第1次执行
      this.setState((prevState)=>({count:prevState.count+3}), () => {
        console.log('3、count', this.state.count);
      })
    })
  }

  render() {
    console.log('-------render--------------');
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.clickHandle}>+</button>
      </div>
    )
  }
}
